<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <script src="../../static/js/index.js"></script>
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add"    href="category_add.ftl" >添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
        <div class="layui-input-inline">
            <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
        </div>
        <button class="layui-btn mgl-20">查询</button>
    </span>
</div>

<!-- 表格 -->
<div id="dateTable">
    <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" style=" height:506px;">
        <div class="layui-table-header">
            <table class="layui-table" cellspacing="0" cellpadding="0" border="0">
                <thead>
                <tr>
                    <th data-field="0" data-type="checkbox" unresize="true">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary"
                                                                                    lay-filter="layTableAllChoose"
                                                                                    type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </th>
                    <th data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id"><span>分类名称</span></div>
                    </th>
                    <th data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account"><span>父级分类</span></div>
                    </th>
                    <th data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name"><span>添加时间</span></div>
                    </th>
                    <th data-field="8">
                        <div class="layui-table-cell laytable-cell-1-8" align="center"><span>操作</span></div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-table-body layui-table-main" style="height: 468px;">
            <table class="layui-table" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                <tr data-index="0" class="">
                    <td data-field="0">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary" type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </td>
                    <td data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id">螺丝刀</div>
                    </td>
                    <td data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account"></div>
                    </td>
                    <td data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name">2018-05-05</div>
                    </td>
                    <td data-field="8" data-off="true" align="center">
                        <div class="layui-table-cell laytable-cell-1-8"><a class="layui-btn layui-btn-mini"
                                                                           lay-event="detail">查看</a> <a
                                class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a></div>
                    </td>
                </tr>
                <tr data-index="0" class="">
                    <td data-field="0">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary" type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </td>
                    <td data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id">一字螺丝刀</div>
                    </td>
                    <td data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account">螺丝刀</div>
                    </td>
                    <td data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name">2018-05-05</div>
                    </td>
                    <td data-field="8" data-off="true" align="center">
                        <div class="layui-table-cell laytable-cell-1-8"><a class="layui-btn layui-btn-mini"
                                                                           lay-event="detail">查看</a> <a
                                class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a></div>
                    </td>
                </tr>
                <tr data-index="0" class="">
                    <td data-field="0">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary" type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </td>
                    <td data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id">一字螺丝刀</div>
                    </td>
                    <td data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account">螺丝刀</div>
                    </td>
                    <td data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name">2018-05-05</div>
                    </td>
                    <td data-field="8" data-off="true" align="center">
                        <div class="layui-table-cell laytable-cell-1-8"><a class="layui-btn layui-btn-mini"
                                                                           lay-event="detail">查看</a> <a
                                class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a></div>
                    </td>
                </tr>
                <tr data-index="0" class="">
                    <td data-field="0">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary" type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </td>
                    <td data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id">一字螺丝刀</div>
                    </td>
                    <td data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account">螺丝刀</div>
                    </td>
                    <td data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name">2018-05-05</div>
                    </td>
                    <td data-field="8" data-off="true" align="center">
                        <div class="layui-table-cell laytable-cell-1-8"><a class="layui-btn layui-btn-mini"
                                                                           lay-event="detail">查看</a> <a
                                class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a></div>
                    </td>
                </tr>
                <tr data-index="0" class="">
                    <td data-field="0">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary" type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </td>
                    <td data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id">一字螺丝刀</div>
                    </td>
                    <td data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account">螺丝刀</div>
                    </td>
                    <td data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name">2018-05-05</div>
                    </td>
                    <td data-field="8" data-off="true" align="center">
                        <div class="layui-table-cell laytable-cell-1-8"><a class="layui-btn layui-btn-mini"
                                                                           lay-event="detail">查看</a> <a
                                class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a></div>
                    </td>
                </tr> <tr data-index="0" class="">
                    <td data-field="0">
                        <div class="layui-table-cell laytable-cell-checkbox"><input name="layTableCheckbox"
                                                                                    lay-skin="primary" type="checkbox">
                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                    class="layui-icon"></i></div>
                        </div>
                    </td>
                    <td data-field="id">
                        <div class="layui-table-cell laytable-cell-1-id">一字螺丝刀</div>
                    </td>
                    <td data-field="account">
                        <div class="layui-table-cell laytable-cell-1-account">螺丝刀</div>
                    </td>
                    <td data-field="auth_group_name">
                        <div class="layui-table-cell laytable-cell-1-auth_group_name">2018-05-05</div>
                    </td>
                    <td data-field="8" data-off="true" align="center">
                        <div class="layui-table-cell laytable-cell-1-8"><a class="layui-btn layui-btn-mini"
                                                                           lay-event="detail">查看</a> <a
                                class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a></div>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-table-tool">
        <div class="layui-inline layui-table-page" id="layui-table-page1">
            <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-3"><a href="javascript:;"
                                                                                               class="layui-laypage-prev layui-disabled"
                                                                                               data-page="0"><i
                    class="layui-icon"></i></a><span class="layui-laypage-curr"><em
                    class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a
                    href="javascript:;" data-page="3">3</a><span class="layui-laypage-spr">…</span><a
                    href="javascript:;" class="layui-laypage-last" title="尾页" data-page="34">34</a><a
                    href="javascript:;" class="layui-laypage-next" data-page="2"><i
                    class="layui-icon"></i></a><span class="layui-laypage-skip">到第<input min="1" value="1"
                                                                                          class="layui-input"
                                                                                          type="text">页<button
                    type="button" class="layui-laypage-btn">确定</button></span><span
                    class="layui-laypage-count">共 1000 条</span><span
                    class="layui-laypage-limits"><select lay-ignore=""><option value="30"
                                                                               selected="">30 条/页</option><option
                    value="60">60 条/页</option><option value="90">90 条/页</option><option value="150">150 条/页</option><option
                    value="300">300 条/页</option></select></span></div>
        </div>
    </div>
    <style>
     .laytable-cell-1-0 {
        width: 50px
    }

    .laytable-cell-1-id {
        width: 230px
    }

    .laytable-cell-1-account {
        width: 230px
    }

    .laytable-cell-1-auth_group_name {
        width: 370px
    }


    .laytable-cell-1-8 {
        width: 210px
    }</style>
</div>

</div>

<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../frame/static/js/vip_comm.js"></script>


<script type="text/javascript">

// layui方法
layui.use(['table', 'form', 'layer', 'vip_table'], function () {
//
// 操作对象
var form = layui.form
, table = layui.table
, layer = layui.layer
, vipTable = layui.vip_table
, $ = layui.jquery;
//
// // 表格渲染
// var tableIns = table.render({
// elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
// , height: vipTable.getFullHeight()    //容器高度
// , cols: [[                  //标题栏
// {checkbox: true, sort: true, fixed: true, space: true}
// , {field: 'id', title: 'ID', width: 80}
// , {field: 'account', title: '用户名', width: 120}
// , {field: 'auth_group_name', title: '权限组', width: 120}
// , {field: 'last_login_time', title: '最后登录时间', width: 180}
// , {field: 'last_login_ip', title: '最后登录IP', width: 180}
// , {field: 'create_time', title: '创建时间', width: 180}
// , {field: 'status', title: '状态', width: 70}
// , {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
// ]]
// , id: 'dataCheck'
// , url: './../json/data_table.json'
// , method: 'get'
// , page: true
// , limits: [30, 60, 90, 150, 300]
// , limit: 30 //默认采用30
// , loading: false
// , done: function (res, curr, count) {
// //如果是异步请求数据方式，res即为你接口返回的信息。
// //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log(res);
//
// //得到当前页码
// console.log(curr);
//
// //得到数据总量
// console.log(count);
// }
// });

// 获取选中行
table.on('checkbox(dataCheck)', function (obj) {
layer.msg('123');
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

// 刷新
$('#btn-refresh').on('click', function () {
tableIns.reload();
});


// you code ...

});
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>